<template>
  <el-container>
    <el-main>
      <el-button @click="toBack">返回</el-button>
      <el-button v-print="'#print'" type="primary">打印</el-button>
      <div id="print">
        <h4 class="text">{{ name }}</h4>
        <!-- <p v-if="identical==1" style="text-align:center;margin-top:-20px">地址：浙江省嘉兴市南湖区城南街道1539号</p> -->
        <h4 class="text text_A">纸板采购单 </h4>
        <div v-if="identical==1" class="case">
          <div style="padding-top:22px">
            <p>供方:{{ fullName }}</p>
            <p>电话:{{ mobilePhone }}</p>
          </div>
          <div>
            <p>传真:{{ fullName }}</p>
            <p>采购单号:{{ documentsNo }}</p>
            <!-- <p>下单日期:{{ documentsNo }}</p> -->
            <p>打印日期:{{ dateFormat(new Date()) }}</p>
          </div>
        </div>
        <!-- <span style="margin-left:60px">供方:{{ fullName }}</span>
        <br>
        <span style="margin-left:60px">电话:{{ mobilePhone }}</span>
        <span style="margin-left:65%">采购单号:{{ documentsNo }}</span>
        <br>
        <span style="margin-left:60px">c</span>
        <span style="margin-left:70%">打印日期:{{ dateFormat(new Date()) }}</span>
        <p />
        <br> -->
        <table>
          <tr>
            <td v-if="identical !==1">客户名称</td>
            <td>任务编号</td>
            <td>材质</td>
            <td>楞型</td>
            <td>分压规格</td>
            <td>长*宽*高</td>
            <td>成本价</td>
            <td>数量</td>
            <td>总价</td>
            <td style="width:450px">交货日期</td>
            <td>备注</td>
          </tr>
          <tr v-for="item in tableData" :key="item.id">
            <td v-if="identical !==1" style="width:1100px">{{ item.name }}</td>
            <td>{{ item.no }}</td>
            <td>{{ item.material }}</td>
            <td>{{ item.stare }}</td>
            <td style="width:300px">{{ item.pressureSpecification }}</td>
            <td>{{ item.length }}*{{ item.width }}*{{ item.height }}</td>
            <td>{{ item.costPrice }}</td>
            <td> {{ item.purchaseQuantity }}</td>
            <td>{{ item.totalPrice }}</td>
            <td style="width:250px" />
            <td />
          </tr>
        </table>
        <table style="margin-top:20px">
          <tr>
            <td><div class="span">备注：{{ remark }}</div> </td>
            <td><div class="span">合计数量：{{ sum_purchaseQuantity }}</div></td>
            <td><div class="span">合计金额：{{ sum_perPrice }}</div></td>
          </tr>
          <tr>
            <td><div class="span">制单人：{{ names }}</div></td>
            <td><div class="span">采购方确认：</div></td>
            <td rowspan="2"><div class="span">供方确认：</div></td>
          </tr>
          <tr>
            <td colspan="2"><div class="span">如供方对以上各项确认无误，请再确认栏签字井回传。如有疑问，速与我方联系!
            </div></td>
          </tr>
        </table>
        <!-- <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          highlight-current-row
          border=""
          show-summary
          style="width: 100%"
        >
          <el-table-column   width="50px" align="center" />
          <el-table-column prop="no" label="任务编号" />
          <el-table-column prop="material" label="材质" />
          <el-table-column prop="stare" label="楞型" />
          <el-table-column prop="pressureSpecification" label="分压规格(MM)" />
          <el-table-column prop="paperSize" label="纸片尺寸(MM)纸长 X 纸宽">
            <template>
              {{ length }}  X {{ width }}
            </template>
          </el-table-column>
          <el-table-column prop="costPrice" label="成本价 元/片" />
          <el-table-column prop="purchaseQuantity" label="数量 (片)" />
          <el-table-column prop="totalPrice" label="总价 (元)" />
          <el-table-column prop="deliveryDate" label="交货日期" />
        </el-table> -->
        <!-- <br>
        <span style="margin-left:60px">备注:{{ remark }}</span>
        <br>
        <Br />
        <span style="margin-left:60px">如供方对以上各项确认无误,请在确认栏签字并回传;<br>
          <span style="margin-left:60px"> 如有疑问,速与我方联系!
            <span style="margin-left:666px">供方确认:</span>
            <span style="margin-left:888px">采购方确认:</span>
          </span>
        </span> -->
        <!-- <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="pagination.total"
          align="center"
          :current-page="pagination.page"
          :page-size="pagination.size"
          @size-change="sizeChange"
          @current-change="pageChange"
        /> -->
      </div>
    </el-main>
  </el-container>
</template>

<script scope>
import initData from '@/mixins/initData'
// import { getById } from '@/api/supplier/supplier'
import { list } from '@/api/basedata/firm'
import { getUser } from '@/api/order/customerOrder'

export default {
  name: 'PurchaseOrderPrinting',
  mixins: [initData],

  data() {
    return {
      tableData: [],
      form: {},
      fullName: '',
      mobilePhone: '',
      documentsNo: '',
      fax: '',
      remark: '',
      spplierId: '',
      billingDate: '',
      date: '',
      length: '',
      width: '',
      name: '',
      totalPrice: '',
      names: '',
      identical: '',
      tempArray: [],
      different: '',
      aaname: ''

    }
  },
  created() {
    this.data = this.$route.query.data
    this.tempArray = this.$route.query.data
    this.aaname = this.$route.query.data[0].name
    this.mobilePhone = this.$route.query.data[0].mobilePhone
    this.fullName = this.$route.query.data[0].fullName
    this.fax = this.$route.query.data[0].fax

    console.log('aaa', this.$route.query.data)
    for (var i = 0; i < this.tempArray.map(x => x.name).length; i++) {
      for (var j = i + 1; j < this.tempArray.map(x => x.name).length; j++) {
        if (this.tempArray.map(x => x.name)[i] !== this.tempArray.map(x => x.name)[j]) {
          this.identical = 2
          this.different = 2
          // console.log(this.length)
        } else {
          this.identical = 1
          // console.log(this.length)
        }
      }
    }

    if (this.different === 2) {
      this.identical = 2
    }
    if (this.data[0].b === 1) {
      this.identical = 1
    }
    if (this.data[0].a === 2) {
      this.identical = 2
    }
    if (this.$route.query.data.length === 1) {
      this.identical = 1
    }
    this.getList()
  },
  methods: {
    dateFormat: function(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day
    },
    getList() {
      this.tableData = this.data
      var sum = 0
      var sum_price = 0
      this.tableData.forEach(a => {
        a.totalPrice = a.costPrice * a.purchaseQuantity
        this.documentsNo = a.documentsNo
        this.remark = a.remark
        this.spplierId = a.supplierId
        this.width = a.width
        this.length = a.length
        sum += parseInt(a.purchaseQuantity)
        sum_price += a.totalPrice
      })

      this.sum_purchaseQuantity = sum
      this.sum_perPrice = sum_price
      this.pagination.total = this.tableData.length
      // this.getSupplier()
      list().then(res => {
        var firmList = []
        firmList = res.list
        firmList.forEach(a => {
          if (a.isFirm === true) {
            this.name = a.name
            console.log('aaaa', this.name)
          }
        })
      })
      getUser().then(res => {
        this.names = res.nickname
      })
    },

    // 加载供应商
    // getSupplier() {
    //   getById(this.spplierId).then(res => {
    //     this.fullName = res.fullName
    //     this.mobilePhone = res.mobilePhone
    //     this.fax = res.fax
    //   })
    // },
    // 返回
    toBack() {
      this.$router.push('/purchase_order')
    }

  }
}
</script>

<style scoped lang="scss">

i {
  cursor: pointer;
}
.text{
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  // margin: 10px 0 -10px 0;

}
.text_A{
  margin-top: -10px;
}
table,tr,td{
  border:1px solid black;
}
table{
  border-collapse:collapse;
  height: auto;
  width:1050px;
  margin: 0 auto;
  /* margin-top: -20px */
}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 180px;
  text-align: center ;
  padding-left:15px;
}
.case{
  display: flex;
  justify-content: space-between;
  width:1050px;
  margin: 0 auto;
  .last{
    margin-top: 40px;
  }
}
.case>div p{
  line-height: 10px;
}
.span{
  font-weight:bold;
  text-align:left
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
